<template>
  <div class="index">
    <ul>
      <li>
        <h3 style="color:#f83b6e;font-weight:bold;">全部订单</h3>
        <p>
          <countTo
            :startVal="startVal"
            :endVal="altOrder"
            :duration="duration"
          ></countTo>
        </p>
      </li>
      <li>
        <h3 style="color:orange;font-weight:bold;">本月订单</h3>
        <p>
          <countTo
            :startVal="startVal"
            :endVal="monthOrder"
            :duration="duration"
          ></countTo>
        </p>
      </li>
      <li>
        <h3 style="color:#91cc75;font-weight:bold;">待发货订单</h3>
        <p>
          <countTo
            :startVal="startVal"
            :endVal="wait"
            :duration="duration"
          ></countTo>
        </p>
      </li>
      <li>
        <h3 style="color:#1ca830;font-weight:bold;">退换货订单</h3>
        <p>
          <countTo
            :startVal="startVal"
            :endVal="rejected"
            :duration="duration"
          ></countTo>
        </p>
      </li>
      <li>
        <h3 style="color:#8391f4;font-weight:bold;">今日成交额</h3>
        <p>
          ￥<countTo
            :startVal="startVal"
            :endVal="today"
            :duration="duration"
          ></countTo>
        </p>
      </li>
      <li>
        <h3 style="color:#8c66fb;font-weight:bold;">本月成交额</h3>
        <p>
          ￥<countTo
            :startVal="startVal"
            :endVal="month"
            :duration="duration"
          ></countTo>
        </p>
      </li>
    </ul>
    <div class="main">
      <div id="column" style="width: 500px; height: 300px"></div>
      <div id="annular" style="width: 500px; height: 300px"></div>
    </div>
    <div class="main">
      <div id="fold" style="width: 500px; height: 300px"></div>
      <div id="dynamic" style="width: 500px; height: 300px"></div>
    </div>
  </div>
</template>

<script>
import countTo from "vue-count-to";
export default {
  components: { countTo },
  data() {
    return {
      startVal: 0,
      duration: 1500,
      altOrder: 37485,
      monthOrder: 3687,
      wait: 1245,
      rejected: 1134,
      today: 10865,
      month: 41389,
    };
  },
  methods: {
    myEcharts() {
      let myChart = this.echarts.init(document.getElementById("annular"));
      //配置图表
      var option = {
        title: {
          text: "商品评论",
        },
        legend: {
          orient: "vertical",
          x: "right",
          data: ["好评", "差评", "未评论"],
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              emphasis: {
                show: true,
              },
            },
            labelLine: {
              show: false,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            data: [
              { value: 12335, name: "好评" },
              { value: 3310, name: "差评" },
              { value: 25035, name: "未评论" },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    myEchart() {
      //   console.log(this.echarts);
      let myChart = this.echarts.init(document.getElementById("dynamic"));
      var data = [];
      for (let i = 0; i < 5; ++i) {
        data.push(Math.round(Math.random() * 200));
      }

      let option = {
        title: {
          text: "商品排行榜",
        },
        xAxis: {
          max: "dataMax",
        },
        yAxis: {
          type: "category",
          data: [
            "百货",
            "家装",
            "食品",
            "女装",
            "男装",
            "内衣",
            "医药",
            "鞋靴",
            "电器",
            "数码",
            "生鲜",
            "洗护",
          ],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 2, // only the largest 3 bars will be displayed
        },
        series: [
          {
            realtimeSort: true,
            name: "单位：件",
            type: "bar",
            data: data,
            label: {
              show: true,
              position: "right",
              valueAnimation: true,
            },
          },
        ],
        legend: {
          show: true,
        },
        animationDuration: 3000,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear",
      };

      function update() {
        var data = option.series[0].data;
        for (var i = 0; i < data.length; ++i) {
          if (Math.random() > 0.9) {
            data[i] += Math.round(Math.random() * 2000);
          } else {
            data[i] += Math.round(Math.random() * 200);
          }
        }
        myChart.setOption(option);
      }

      setInterval(function () {
        update();
      }, 3000);
    },
    fold() {
      let myChart = this.echarts.init(document.getElementById("fold"));
      var option = {
          title: {
          text: "近七天销售额趋势图（元）",
        },
        xAxis: {
          data: ["前6天", "前5天", "前4天", "前3天", "前2天","昨天","今天"],
        },
        yAxis: {},
        series: [
          {
            data: [6007, 10654, 9102, 6301, 15649,8213,10865],
            type: "line",
            smooth: true,
          },
        ],
      };
      myChart.setOption(option);
    },
    column() {
      let myChart = this.echarts.init(document.getElementById("column"));
      var option = {
        title: {
          text: "今日订单",
        },
        legend: {
          orient: "vertical",
          x: "right",
          data: ["待确认", "待发货", "待付款","待评价"],
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            
            data: [
              {
                value: 45,
                name: "待确认",
              },
              {
                value: 12,
                name: "待发货",
              },
              {
                value: 23,
                name: "待付款",
              },
              {
                value: 20,
                name: "待评价",
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.myEcharts();
    this.myEchart();
    this.fold();
    this.column();
  },
};
</script>

<style lang="less" scoped>
.index {
  padding: 50px;
  ul {
    display: flex;
    justify-content: space-around;
    margin-bottom: 50px;
    p {
      font-weight: bold;
      margin-top: 10px;
      text-align: center;
    }
  }
  .main {
    display: flex;
    justify-content: space-around;
  }
}
</style>